<template>
	<view class="softmanger">
		<!-- 头部 -->
		<view class="softmanger-header">
			<!-- 内容 -->
			<view class="softmanger-header-box">
				<text class="softmanger-header-box-title">软件管家</text>
				<view>
					<text class="iconfont" @tap="openSoftList">&#xe697;</text>
					<text class="iconfont" @tap="openEditor">&#xe781;</text>
				</view>
			</view>
		</view>
		<!-- 内容 -->
		<view class="softmanger-content">
			<view class="softmanger-content-box">
				<view>我的收藏</view>
				<view>
					<view>
						<text class="iconfont" style="color:#FBAD0B ;">&#xe60f;</text>
						<view>电费</view>
					</view>
					<view>
						<text class="iconfont" style="color:#13B466 ;">&#xe66c;</text>
						<view>水费</view>
					</view>
					<view>
						<text class="iconfont" style="color:#EC6536 ;">&#xe611;</text>
						<view>燃气费</view>
					</view>
					<view class="last">
						<text class="iconfont" style="color:#2D9AD5 ;">&#xe87a;</text>
						<view>宽带费</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 内容 -->
		<view class="softmanger-content">
			<view class="softmanger-content-box">
				<view>生活缴费</view>
				<view>
					<view>
						<text class="iconfont" style="color:#FBAD0B ;">&#xe60f;</text>
						<view>电费</view>
					</view>
					<view>
						<text class="iconfont" style="color:#13B466 ;">&#xe66c;</text>
						<view>水费</view>
					</view>
					<view>
						<text class="iconfont" style="color:#EC6536 ;">&#xe611;</text>
						<view>燃气费</view>
					</view>
					<view>
						<text class="iconfont" style="color:#FBAD0B ;">&#xe61c;</text>
						<view>固话费</view>
					</view>
					<view>
						<text class="iconfont" style="color:#2D9AD5 ;">&#xe87a;</text>
						<view>宽带费</view>
					</view>
					<view>
						<text class="iconfont" style="color:#13B466 ;">&#xe739;</text>
						<view>有线电视</view>
					</view>
					<view class="last">
						<text class="iconfont" style="color:#EC6536 ;">&#xe64f;</text>
						<view>油卡充值</view>
					</view>
					<view class="last">
						<text class="iconfont" style="color:#13B466 ;">&#xe617;</text>
						<view>ETC办理</view>
					</view>
					<view class="last">
						<text class="iconfont" style="color:#13B466 ;">&#xe638;</text>
						<view>话费代扣</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 内容 -->
		<view class="softmanger-content">
			<view class="softmanger-content-box">
				<view>限时推广</view>
				<view>
					<view class="last">
						<text class="iconfont" style="color:#07C160 ;">&#xe65f;</text>
						<view>健康防疫码</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 内容 -->
		<view class="softmanger-content">
			<view class="softmanger-content-box">
				<view>第三方服务</view>
				<view>
					<view>
						<text class="iconfont" style="color:#FA5251 ;">&#xe651;</text>
						<view>京东购物</view>
					</view>
					<view>
						<text class="iconfont" style="color:#FA9E3B ;">&#xe61d;</text>
						<view>滴滴出行</view>
					</view>
					<view>
						<text class="iconfont" style="color:#07C160 ;">&#xe687;</text>
						<view>酒店</view>
					</view>
					<view>
						<text class="iconfont" style="color:#FA5251 ;">&#xe613;</text>
						<view>拼多多</view>
					</view>
					<view>
						<text class="iconfont" style="color:#2D9AD5 ;">&#xe668;</text>
						<view>哈喽单车</view>
					</view>
					<view>
						<text class="iconfont" style="color:#FBAD0B ;">&#xe622;</text>
						<view>美团外卖</view>
					</view>
					<view class="last">
						<text class="iconfont" style="color:#2D9AD5 ;">&#xe622;</text>
						<view>饿了么</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			
			}
		},
		methods: {
			/* 打开软件列表 */
			openSoftList: function() {
				console.log('打开软件列表')
			},
			/* 进入编辑模式 */
			openEditor: function() {
				console.log('进入编辑模式')
			},
		}
	}
</script>

<style scoped lang="less">
	/* 引入color.less */
	@import url("../../static/color.less");

	/* 引入fontSize.less */
	@import url("../../static/fontSize.less");

	/* 主体 */
	.softmanger {
		background-color: #F5F5F5;
	}

	/* 头部 */
	.softmanger-header {
		height: 150rpx;
		position: relative;
		background-color: @masterColor;


		/* 内容 */
		.softmanger-header-box {
			display: flex;
			width: 100%;
			height: 100rpx;
			position: absolute;
			bottom: 0;
			left: 0;
			color: @colorWrite;
			align-items: center;
			justify-content: space-between;

			/* 标题 */
			.softmanger-header-box-title {
				padding-left: 34rpx;
				font-size: @fontBigger;
			}

			view {
				display: flex;
				align-items: center;
			}

			/* iconfont */
			.iconfont {
				margin: 0 25rpx 0 13rpx;
				font-weight: bold;
				font-size: 55rpx;
			}
		}
	}

	/* 内容 */
	.softmanger-content {
		.softmanger-content-box {
			margin: 15rpx;
			color: #808083;
			background-color: @colorWrite;
			border-radius: 20rpx;

			&>view:first-child {
				padding: 30rpx 0;
				text-indent: 30rpx;
				border-bottom: 1rpx solid #F8F8FB;
			}

			&>view:nth-child(2) {
				display: flex;
				flex-wrap: wrap;

				&>view {
					box-sizing: border-box;
					width: 240rpx;
					height: 188rpx;
					text-align: center;
					border-right: 1px solid #F8F8FB;
					border-bottom: 1px solid #F8F8FB;

					&:nth-child(3n) {
						border-right: none;
					}

					&.last {
						border-bottom: none;
					}

					.iconfont {
						font-size: 56rpx;
					}

					&>text {
						display: inline-block;
						margin: 48rpx 0 15rpx;
					}
				}
			}
		}
	}
</style>
